<template>
  <tree @query="doQuery2" @gateway="getGateway" :gatewayType="0"></tree>
  <div class="rightContent">
    <div class="page-header">
      <query :columns="columns" @query="doQuery"></query>
    </div>
    <div class="flex-col-table">
      <div class="btn-row" style="justify-content: left;padding-left: 10px;">
        <div :class="{ 'btnbox': pid }">
          <el-button type="danger" @click="setLightNum">
            {{ i18n.language === 'zh-cn' ? "开关灯值" : "Switchlightvalue" }}
          </el-button>
          <el-button type="primary" @click="newAdd()">
            {{ i18n.language === 'zh-cn' ? '新增灯' : 'Addlights' }}
          </el-button>
          <el-button type="primary" @click="allLightOn">
            {{ i18n.language === 'zh-cn' ? "全部开灯" : "Alllightson" }}
          </el-button>
          <el-button type="primary" @click="allLightOff">
            {{ i18n.language === 'zh-cn' ? "全部关灯" : "Turnoffalllights" }}
          </el-button>
          <el-button type="primary" @click="allLightAdjust">
            {{ i18n.language === 'zh-cn' ? "全部调光" : "DimmingAll" }}
          </el-button>
          <el-button type="primary" @click="allAdjustColor">
            {{ i18n.language === 'zh-cn' ? "全部调色" : "ColorAll" }}
          </el-button>
          <el-button type="primary" @click="allDarkenDelay">
            {{ i18n.language === 'zh-cn' ? "全关灯延时" : "Fullturnoffdelay" }}
          </el-button>
          <el-button type="primary" @click="allTrigger">
            {{ i18n.language === 'zh-cn' ? "全感应头开关" : "FullInductionHeadSwitch" }}
          </el-button>
          <el-button type="primary" @click="allSensitivity">
            {{ i18n.language === 'zh-cn' ? "全感应头灵敏度" : "FullSensingHeadSensitivity" }}
          </el-button>
          <el-button type="primary" @click="gradually">
            {{ i18n.language === 'zh-cn' ? "全渐亮灭" : "AllGraduallyBrighteningAndFading" }}
          </el-button>
          <el-button type="primary" @click="allPropertie">
            {{ i18n.language === 'zh-cn' ? "全设备属性" : "FullDeviceProperties" }}
          </el-button>
          <el-button type="primary" @click="allLightTest">
            {{ i18n.language === 'zh-cn' ? "全灯测试" : "FullLightTest" }}
          </el-button>
          <br />
          <el-button type="primary" @click="unbind">
            {{ i18n.language === 'zh-cn' ? '批量删除' : 'BatchDelete' }}
          </el-button>
          <el-button type="primary" @click="updateCustomName2">
            {{ i18n.language === 'zh-cn' ? "设置别名" : "SetAlias" }}
          </el-button>
          <el-button type="primary" @click="setArea">
            {{ i18n.language === 'zh-cn' ? "设置区号" : "SetAreaCode" }}
          </el-button>
          <el-button type="primary" @click="groupNum">
            {{ i18n.language === 'zh-cn' ? "设置组号" : "SetGroupNumber" }}
          </el-button>
          <el-button type="primary" @click="ungroup()">
            {{ i18n.language === 'zh-cn' ? "解除分组" : "Ungroup" }}
          </el-button>
          <el-button type="primary" @click="lightOn">
            {{ i18n.language === 'zh-cn' ? "开灯" : "turnOnTheLight" }}
          </el-button>
          <el-button type="primary" @click="lightOff">
            {{ i18n.language === 'zh-cn' ? "关灯" : "TurnOffTheLights" }}
          </el-button>
          <el-button type="primary" @click="adjustLight">
            {{ i18n.language === 'zh-cn' ? "调光" : "Dimming" }}
          </el-button>
          <el-button type="primary" @click="adjustColor">
            {{ i18n.language === 'zh-cn' ? "调色" : "toning" }}
          </el-button>
          <el-button type="primary" @click="setsensitivity">
            {{ i18n.language === 'zh-cn' ? "设置灵敏度" : "SetSensitivity" }}
          </el-button>
          <el-button type="primary" @click="flash()">
            {{ i18n.language === 'zh-cn' ? '闪一闪' : 'Twinkle' }}
          </el-button>
          <el-button type="primary" @click="stopFlash()">
            {{ i18n.language === 'zh-cn' ? '停止闪' : 'Stop flashing' }}
          </el-button>
          <el-button type="primary" @click="atOperation">
            {{ i18n.fy.AT操作 }}
          </el-button>
          <el-button type="primary" @click="OTAUpgrade">
            {{ i18n.language === 'zh-cn' ? "OTA升级" : "OTAupgrade" }}
          </el-button>
        </div>
      </div>
      <el-table :empty-text="i18n.fy.nodata" :data="data.tableData" ref="multipleTableRef" border
        :style="{ width: getWidth(), height: getHeight() }" v-loading="data.loading"
        :element-loading-text="i18n.fy.loading" @selection-change="handleSelectionChange"
        @sort-change="sortChangeTable">
        <el-table-column type="selection" width="55" fixed />
        <el-table-column prop="macaddress" :label="i18n.fy.SerialNumber" width="70" align="center" fixed>
          <template #default="scope">
            {{ (scope.$index * 1 + 1 + (data.queryForm.page - 1) * data.queryForm.limit) }}
          </template>
        </el-table-column>
        <el-table-column prop="macaddress" :label="i18n.fy.MACAddress" width="150" fixed />
        <el-table-column prop="customName" :label="i18n.fy.DeviceAliases" width="150" :sortable="true" fixed
          :show-overflow-tooltip='true'>
          <template #default="scope">
            <span v-if="scope.row.customName === '01'">CCO</span>
            <span v-else-if="scope.row.customName === '02'">STA</span>
            <span v-else-if="scope.row.customName === '03'">METER</span>
            <span v-else>
              {{ scope.row.customName || '' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="deviceType" :label="i18n.fy.EquipmentName" :sortable="true" width="150" />
        <el-table-column prop="operatingStatus" :label="i18n.fy.DeviceStatus" :sortable="true" width="150">
          <template #default="scope">
            <span v-if="scope.row.operatingStatus === '01'" style="color:lawngreen">
              {{ i18n.language === 'zh-cn' ? "在线" : "online" }}
            </span>
            <span v-else-if="scope.row.operatingStatus === '00'" style="color:#ddd">
              {{ i18n.language === 'zh-cn' ? "离线" : "offline" }}
            </span>
            <span v-else>{{ scope.row.operatingStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="areaCode" :label="i18n.fy.EquipmentArea" width="150" :sortable="true" />
        <el-table-column prop="groupName" :label="i18n.fy.EquipmentGroupNumber" width="220">
          <template #header="scope">
            <div style="display: flex;" class="selectName">
              {{ i18n.fy.EquipmentGroupNumber }}
              <select v-model="customName" placeholder="" @change="setCustomName()">
                <option v-for="item in options" :value="item.group_name">{{ item.name || item.group_name }}</option>
              </select>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="luminance" :label="i18n.fy.CurrentBrightness" width="150">
        </el-table-column>
        <el-table-column prop="triggerOpenLightNum" :label="i18n.fy.Someonebrightness" width="150">
        </el-table-column>
        <el-table-column prop="triggerFloodlightNum" :label="i18n.fy.Unmannedbrightness" width="150">
        </el-table-column>
        <el-table-column prop="darkenDelay" :label="i18n.fy.Delaytime" width="150">
        </el-table-column>
        <el-table-column prop="colorTemperature" :label="i18n.fy.Currentchromaticity" width="150">
        </el-table-column>
        <el-table-column prop="hasTrigger" :label="i18n.fy.Sensingheadstatus" width="150">
        </el-table-column>
        <el-table-column prop="sensorSensitivity" :label="i18n.fy.sensorSensitivity" width="150">
          <template #default="scope">
            <span v-if="scope.row.sensorSensitivity == 'FF'"></span>
            <span v-else>
              {{ scope.row.sensorSensitivity }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="luminanceChange" :label="i18n.fy.luminanceChange" width="150">
          <template #default="scope">
            {{ scope.row.luminanceChange }}
          </template>
        </el-table-column>
        <el-table-column prop="ratedPower" :label="i18n.fy.ratedPower" width="150">
        </el-table-column>
        <el-table-column prop="kwh" :label="i18n.fy.electricity + '(KWH)'" width="150">
          <template #default="scope">
            {{ scope.row.kwh / 1000 }}
          </template>
        </el-table-column>
        <el-table-column prop="amp" :label="i18n.fy.power + '(KW)'" width="150">
          <template #default="scope">
            {{ scope.row.amp / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="watt" :label="i18n.fy.current + '(A)'" width="150">
          <template #default="scope">
            {{ scope.row.watt / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="softwareVersion" :label="i18n.fy.Version" width="150">
        </el-table-column>
        <el-table-column prop="updateTime" :label="i18n.fy.updateTime" width="170">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="onChanSize" @current-change="onChanPage" v-model:current-page="data.queryForm.page"
        v-model:page-size="data.queryForm.limit" :total="data.total" />
      <div id="lightNameDiv" style="display: none;padding: 20px;text-align: center">
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <div class="lightNameDiv">
                <label class="layui-form-label">设备名称:</label>
                <div class="layui-input-inline">
                  <input type="text" name="customName" id="customName" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <!-- 调整层 -->
      <div id="slideDiv" style="display: none;padding: 20px;text-align: center">
        <div id="slideTest1"></div>
      </div>
      <!-- 调整层2 -->
      <div id="slideDiv2" style="display: none;padding: 20px;text-align: center">
        <div class="layui-form-item">
          <label class="layui-form-label">
            {{ i18n.language === 'zh-cn' ? '关灯值' : 'Successfully set' }}
            :</label>
          <div class="layui-input-block">
            <div id="slide1"></div>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">
            {{ i18n.language === 'zh-cn' ? '开灯值' : 'Successfully set' }}
            :</label>
          <div class="layui-input-block">
            <div id="slide2"></div>
          </div>
        </div>
      </div>
      <div id="lightNameDiv2" style="display: none;padding: 20px;text-align: center">
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <div>
                <label class="layui-form-label">
                  {{ i18n.language === 'zh-cn' ? '设备组号' : 'Equipment group number' }}
                  :</label>
                <div class="layui-input-inline">
                  <input type="text" name="groupNum" id="groupNum" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div id="lightNameDiv2_3" style="display: none;padding: 20px;text-align: center">
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <div>
                <label class="layui-form-label">
                  {{ i18n.language === 'zh-cn' ? '设备组号' : 'Equipment group number' }}
                  :</label>
                <div class="layui-input-inline">
                  <input type="text" name="groupNum" id="groupNum_3" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div id="lightTestDiv" style="display: none;padding: 20px;text-align: center">
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <label class="layui-form-label">
              {{ i18n.language === 'zh-cn' ? '开关值' : 'switch value' }}
              :</label>
            <div class="layui-input-block">
              <input type="radio" name=lTest value="0" title="开" checked="">
              <input type="radio" name="lTest" value="1" title="关">
            </div>
          </div>
        </form>
      </div>
      <!-- 新增和修改的弹出层开始 -->
      <div style="display: none;padding: 20px;text-align: center" class="bgimg" id="saveOrUpdateDiv">
        <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
          <div class="layui-form-item">
            <div class="layui-form-item">
              <label class="layui-form-label">
                {{ i18n.language === 'zh-cn' ? 'mac地址' : 'macAddress' }}
                :</label>
              <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="hidden" name="deviceFid">
                <input type="text" name="macaddress" readonly lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">
                {{ i18n.language === 'zh-cn' ? '触发器开灯亮度' : 'TriggerOnBrightness' }}
                :</label>
              <div class="layui-input-inline">
                <input type="text" name="triggerOpenLightNum" lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">
                {{ i18n.language === 'zh-cn' ? '触发器关灯亮度' : 'TriggerOffLightBrightness' }}
                :</label>
              <div class="layui-input-inline">
                <input type="text" name="triggerFloodlightNum" lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">开灯渐变:</label>
              <div class="layui-input-inline">
                <input type="text" name="luminanceChange" lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">开灯延迟:</label>
              <div class="layui-input-inline">
                <input type="text" name="luminanceDelay" lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">关灯渐变:</label>
              <div class="layui-input-inline">
                <input type="text" name="darkenChange" lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">关灯延迟:</label>
              <div class="layui-input-inline">
                <input type="text" name="darkenDelay" lay-verify="required" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">组编号:</label>
              <div class="layui-input-inline">
                <input type="text" name="groupNum" id="select-group" readonly autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">带触发器:</label>
              <div class="layui-input-inline">
                <input type="text" readonly id="hasTrigger" lay-verify="required" autocomplete="off"
                  class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">控灯数:</label>
              <div class="layui-input-inline">
                <input type="text" name="controlLightSize" id="controlLightSize" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">灯控mac地址:</label>
              <div class="layui-input-inline">
                <input type="text" name="triggerMacaddress" id="triggerMacaddress" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
          <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
              <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
                lay-filter="doSubmit" lay-submit="">
                {{ i18n.language === 'zh-cn' ? `提交` : 'submit' }}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- 调整层2 -->
    <div id="slideDiv3" class="slideDiv linev" style="display: none;padding: 20px;text-align: center">
      <div class="layui-form-item" style="margin-top:50px;">
        <label class="layui-form-label tsdm-box-cls">
          {{ i18n.language === 'zh-cn' ? `递变` : 'change by degrees' }}
          :</label>
        <div class="layui-input-block">
          <div id="slide3"></div>
          <div class="slitips">00关闭缓光</div>
        </div>
      </div>
    </div>
    <div id="lightNameDiv4" style="display: none;padding: 20px;text-align: center">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <div class="layui-inline">
            <div>
              <label class="layui-form-label">设备区号:</label>
              <div class="layui-input-inline">
                <input type="text" name="areaCode" id="areaCode" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div id="lightNameDiv4_3" style="display: none;padding: 20px;text-align: center">
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <div class="layui-inline">
            <div>
              <label class="layui-form-label">设备区号:</label>
              <div class="layui-input-inline">
                <input type="text" name="areaCode" id="areaCode_3" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <el-dialog v-model="otaVisible" title="OTA升级" width="30%" draggable>
      <div class="uploadBox" v-loading="uploadLoadding" element-loading-text="文件正在上传中...">
        <el-upload ref="upload" class="upload-demo" :action='$httpUrl + "/operation/ota"' :limit="1"
          :on-exceed="handleExceed" :auto-upload="false" :data="uploadData" :on-success="uploadScucess">
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip text-red">
              {{ i18n.language === 'zh-cn' ? `限制1个文件，新文件将覆盖旧文件` : 'Limit 1 file, new file will overwrite old file' }}
            </div>
          </template>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer"> <el-space :size="10">
            <el-button @click="enterUpload()">取消</el-button></el-space>
          <el-space :size="30">
            <el-button class="ml-3" type="success" @click="submitUpload">
              {{ i18n.language === 'zh-cn' ? `开始上传` : 'StartSploading' }}
            </el-button></el-space>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible" :title="i18n.fy.AT操作" width="30%" draggable>
      <div style="position: relative;height: 600px;" v-loading="senloading">
        <div class="atbox">
          <el-row v-for="(item, i) in showChatList">
            <div style="position: absolute;z-index: 9;margin-top: -30px;color: #fff;font-size: 12px;">
              <span>系统回复：{{ item.time }}</span>
            </div>
            <el-col :span="10">
              <el-input style="width:100%;float:left;margin-top: -10px;" v-model="item.hcont" disabled="true" :rows="2"
                type="textarea" placeholder="回复的内容" />
            </el-col>
            <el-col :span="14">
              <el-input style="width:95%;float:right;" v-model="item.fcont" disabled="true" :rows="2" type="textarea"
                placeholder="发送的内容" />
            </el-col>
          </el-row>
        </div>
        <el-row class="rowbot">
          <el-col :span="24">
            <el-input style="width:100%;float: right;" :rows="2" v-model="textareaV" type="textarea" placeholder="请输入指令"
              @keyup.enter="enterSen" />
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="enterSen">
            {{ i18n.fy.sending }}
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog :close-on-click-modal='false' v-model="dialogVisible2" draggable
      :title="i18n.language === 'zh-cn' ? '扫描添灯' : 'Scan and add light'" width="50%" class="newAdd"
      style="background: #000;" @close='closeDialog' top="30px">
      <div style="padding-bottom: 30px;">
        <div>
          <div class="top tops" style="margin-top: -20px;">
            <el-row>
              <el-col :span="24">
                <span :span="4" style="display:none;">
                  <el-select style="width:120px;margin-left:-6px;" v-model="gateway" class="m-2" placeholder="">
                    <el-option :label="i18n.language === 'zh-cn' ? '全部网关' : 'Allgateways'" :value="''" />
                    <el-option v-for="item in gatewayList" :key="item.id" :label="item.title" :value="item.id" />
                  </el-select>
                </span>
                <span :span="3" style="display:none;">
                  <el-input style="width:100px;" v-model="district"
                    :placeholder="i18n.language === 'zh-cn' ? '区' : 'distinguish'" />
                </span>
                <span :span="3" style="display:none;">
                  <el-input style="width:100px;" v-model="group" placeholder="组" />
                </span>
                <span :span="3" style="display:none;">
                  <el-input style="width:100px;" v-model="num" placeholder="号" />
                </span>
                <span :span="4" style="display:none;">
                  <el-input style="width:120px;" v-model="identity" placeholder="网络密码" />
                </span>
                <span :span="4">
                  <el-button type="primary" @mouseover="mouLight" @mouseout="outLinght"
                    :class="{ 'searchFlag': searchFlag }" @click="searchLight()">
                    {{ searchHtml }}
                    <el-icon v-show="iconFlag">
                      <Loading class='loa' />
                    </el-icon>
                  </el-button>
                  <span v-show="contNumber" class="numberLog">
                    <span>共{{ contNumber }}盏灯，已经更新 {{ numberLog }}盏灯</span>
                  </span>
                </span>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-table :empty-text="i18n.fy.nodata" :data="data.tableData2" style="width: 100%" class="newAddTab"
          @selection-change="handleSelectionChange2">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="macaddress" label="MAC地址" width="180" />
          <el-table-column prop="areaCode" label="区" :sortable="true" />
          <el-table-column prop="groupName" label="组" :sortable="true" />
          <el-table-column prop="deviceIndex" label="号" :sortable="true" />
          <el-table-column prop="deviceType" label="类型" />
          <el-table-column prop="updateTime" label="更新时间" width="180" :sortable="true" />
          <el-table-column prop="option" label="操作" width="120">
            <template #default="scope">
              <el-button type="primary" size="small" @click="start(scope.row)">闪一闪</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="enterAdd()">确认新增</el-button>
          <el-button @click="close">
            关闭
          </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog class="dialogPermiss" style="background: #000;" v-model="dialogTableVisible" title="设置区组号" width="100%"
      draggable>
      <div class="PermissionList">
        <div class='setArea3'>
          <el-button type="primary" @click="setArea3">
            {{ i18n.language === 'zh-cn' ? "设置区号" : "SetAreaCode" }}
          </el-button>
          <el-button type="primary" @click="groupNum3">
            {{ i18n.language === 'zh-cn' ? "设置组号" : "SetGroupNumber" }}
          </el-button>
          <el-button type="primary" @click="ungroup3">
            {{ i18n.language === 'zh-cn' ? "解除分组" : "Ungroup" }}
          </el-button>
        </div>
        <el-table :empty-text="i18n.fy.nodata" ref='multipleTableRef_3' :scrollbar-always-on='true' style="width: 100%"
          class='wiretab' :data="gridData" border :element-loading-text="i18n.fy.loading"
          @selection-change="handleSelectionChange_3" @select="selectClick_3" @row-click="handleRowClick_3"
          @sort-change="sort_change2">
          <el-table-column type="selection" width="55" fixed />
          <el-table-column prop="macaddress" :label="i18n.fy.SerialNumber" width="70" align="center" fixed>
            <template #default="scope">
              {{ (scope.$index * 1 + 1 + (data.queryForm.page - 1) * data.queryForm.limit) }}
            </template>
          </el-table-column>
          <el-table-column prop="macaddress" :label="i18n.fy.MACAddress" width="150" fixed />
          <el-table-column prop="customName" :label="i18n.fy.DeviceAliases" width="150" fixed :sortable="true"
            :show-overflow-tooltip='true'>
            <template #default="scope">
              <span v-if="scope.row.customName === '01'">CCO</span>
              <span v-else-if="scope.row.customName === '02'">STA</span>
              <span v-else-if="scope.row.customName === '03'">METER</span>
              <span v-else>
                {{ scope.row.customName || '' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="deviceType" :label="i18n.fy.EquipmentName" width="150" :sortable="true" />
          <el-table-column prop="operatingStatus" :label="i18n.fy.DeviceStatus" :sortable="true" width="150">
            <template #default="scope">
              <span v-if="scope.row.operatingStatus === '01'" style="color:lawngreen">
                {{ i18n.language === 'zh-cn' ? "在线" : "online" }}
              </span>
              <span v-else-if="scope.row.operatingStatus === '00'" style="color:#ddd">
                {{ i18n.language === 'zh-cn' ? "离线" : "offline" }}
              </span>
              <span v-else>{{ scope.row.operatingStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="areaCode" :label="i18n.fy.EquipmentArea" width="150" :sortable="true" />
          <el-table-column prop="groupName" :label="i18n.fy.EquipmentGroupNumber" width="220">
            <template #header="scope">
              <div style="display: flex;" class="selectName">
                {{ i18n.fy.EquipmentGroupNumber }}
                <select v-model="customName" placeholder="" @change="setCustomName()">
                  <option v-for="item in options" :value="item.group_name">{{ item.name || item.group_name }}</option>
                </select>
              </div>
            </template></el-table-column>
          <el-table-column prop="luminance" :label="i18n.fy.CurrentBrightness" width="150">
          </el-table-column>
          <el-table-column prop="triggerOpenLightNum" :label="i18n.fy.Someonebrightness" width="150">
            <template #default="scope">
              {{ hex2int(scope.row.triggerOpenLightNum) }}
            </template>
          </el-table-column>
          <el-table-column prop="triggerFloodlightNum" :label="i18n.fy.Unmannedbrightness" width="150">
            <template #default="scope">
              {{ hex2int(scope.row.triggerFloodlightNum) }}
            </template>
          </el-table-column>
          <el-table-column prop="darkenDelay" :label="i18n.fy.Delaytime" width="150">
          </el-table-column>
          <el-table-column prop="colorTemperature" :label="i18n.fy.Currentchromaticity" width="150">
          </el-table-column>
          <el-table-column prop="hasTrigger" :label="i18n.fy.Sensingheadstatus" width="150">
          </el-table-column>
          <el-table-column prop="sensorSensitivity" :label="i18n.fy.sensorSensitivity" width="150">
            <template #default="scope">
              <span v-if="scope.row.sensorSensitivity == 'FF'"></span>
              <span v-else>
                {{ scope.row.sensorSensitivity }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="luminanceChange" :label="i18n.fy.luminanceChange" width="150">
            <template #default="scope">
              {{ scope.row.luminanceChange }}
            </template>
          </el-table-column>
          <el-table-column prop="ratedPower" :label="i18n.fy.ratedPower" width="150">
          </el-table-column>
          <el-table-column prop="kwh" :label="i18n.fy.electricity + '(KWH)'" width="150">
            <template #default="scope">
              {{ scope.row.kwh / 1000 }}
            </template>
          </el-table-column>
          <el-table-column prop="amp" :label="i18n.fy.power + '(KW)'" width="150">
            <template #default="scope">
              {{ scope.row.amp / 100 }}
            </template>
          </el-table-column>
          <el-table-column prop="watt" :label="i18n.fy.current + '(A)'" width="150">
            <template #default="scope">
              {{ scope.row.watt / 100 }}
            </template>
          </el-table-column>
          <el-table-column prop="softwareVersion" :label="i18n.fy.Version" width="150">
          </el-table-column>
          <el-table-column prop="updateTime" :label="i18n.fy.updateTime" width="170">
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
import query from '../../components/query.vue'
import tree from '../../components/tree.vue'
import { clackAtApi } from "@/api/tosetdevicemanagerApi";
const { appContext: { config: { globalProperties } } } = getCurrentInstance()
let $httpUrl = globalProperties.$httpUrl;
let columns = reactive({ 'macaddress': { 'label': 'MAC', 'queryValue': '' } })
let chatList = ref([])
let showChatList = ref([])

let data = reactive({
  queryForm: { page: 1, limit: 100 },
  tableData: [],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
    role: [{ required: true, message: '请选择岗位', trigger: 'change' }]
  }
})
let uploadData = ref({});
const handleExceed = (files) => {
  upload.value.clearFiles()
  const file = files[0]
  file.uid = genFileId()
  upload.value.handleStart(file)
}

const submitUpload = () => {
  uploadLoadding.value = true;
  upload.value.submit()
}
const enterUpload = () => {
  otaVisible.value = false;
  upload.value.clearFiles();
}
let uploadLoadding = ref(false);
const uploadScucess = () => {
  ElMessage({
    message: '文件上传成功!',
    type: 'success',
  })
  uploadLoadding.value = false;
}

const reQueryForm = () => { // 重置查询表单
  data.queryForm = {
    page: 1,
    limit: 100
  }
}

const currentChange = (page) => {
  pageData.queryForm.page = page
  getList()
}

const sizeChange = (size) => {
  data.queryForm.page = size
  getList()
}

const onChanSize = (e) => {
  //修改分页数
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
}

const onChanPage = (e) => {
  //修改分页
  data.queryForm.page = e;
  getList();
}

let formRef = ref(null)

let searchFlag = ref(false);
let searchHtml = ref('网关搜灯');
let iconFlag = ref(false);

const getList = (params, num) => { // 获取表格数据
  data.loading = true;
  $axios.get('/operationDevice/queryOperationDeviceAllList', {
    ...data.queryForm,
    ...params,
    deviceFid: pid.value,
    limit: 10000,
    page: 1
  }).then(res => {
    if (res.data.data == null) {
      data.loading = false;
      return;
    }
    data.loading = false;
    data.tableData = res.data.data.records.slice((data.queryForm.page - 1) * data.queryForm.limit, data.queryForm.page * data.queryForm.limit);
    if (num == 1) {
      window.setTimeout(function () {
        data.tableData.forEach(row => {
          multipleTableRef.value.toggleRowSelection(row);
        });
      }, 200)
    }
    data.total = res.data.data.total;
    total = data.total
  })
}
let pid = ref('');
const doQuery = (params) => {
  if (params.deviceFid) {
    pid.value = params.deviceFid;
  }
  uploadData.value = { deviceFid: pid.value }
  let num = 0;
  if (params.hasOwnProperty('macaddress')) {
    num = 1;
  } else {
    num = 0;
  }
  getList({ ...params, deviceFid: pid.value }, 0);
  getDeviceAliasAllList();
  $.get($httpUrl + "/userLightNum/queryUserLightNum", { deviceFid: pid.value }, function (res) {
    if (res.data != null) {
      lightOnNum = res.data.lightOnNum;
      lightOffNum = res.data.lightOffNum;
    } else {
      lightOnNum = 40;
      lightOffNum = 0;
    }
  })
}

const doQuery2 = (params) => {
  customName.value = '全部';
  if (params.deviceFid) {
    pid.value = params.deviceFid;
  }
  uploadData.value = { deviceFid: pid.value }
  let num = 0;
  if (params.hasOwnProperty('macaddress')) {
    num = 1;
  } else {
    num = 0;
  }
  getList({ ...params, deviceFid: pid.value }, 0);
  getDeviceAliasAllList();
  $.get($httpUrl + "/userLightNum/queryUserLightNum", { deviceFid: pid.value }, function (res) {
    if (res.data != null) {
      lightOnNum = res.data.lightOnNum;
      lightOffNum = res.data.lightOffNum;
    } else {
      lightOnNum = 40;
      lightOffNum = 0;
    }
  })
}

let gatewayList = ref([]);
const getGateway = (params) => {
  gatewayList.value = params;
}
const setLightNum = () => {
  form.render();
  let lightNum1 = 0;
  let lightNum2 = 0;
  let ins1 = slider1.render({
    elem: '#slide1'  //绑定元素
    , input: true //输入框
    , min: 0
    , max: 100
    , value: lightOffNum
    , change: function (value) {
      lightNum1 = value;
    }
  });
  let ins2 = slider2.render({
    elem: '#slide2'  //绑定元素
    , input: true //输入框
    , min: 10
    , max: 100
    , value: lightOnNum
    , change: function (value) {
      lightNum2 = value;
    }
  });
  if (lightOnNum !== 0) {
    lightNum1 = lightOffNum;
    lightNum2 = lightOnNum;
  } else {
    lightNum1 = 0;
    lightNum2 = 20;
  }
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === 'zh-cn' ? '设置开关灯值' : 'Set switch light value:',
    content: $("#slideDiv2"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">' + (i18n.language === 'zh-cn' ? '确定' : 'determine') + '</div>', '<div class="layui-icon layui-icon-close">' + (i18n.language === 'zh-cn' ? '取消' : 'cancellation') + '</div>'],
    yes: function (index, layero) {
      $.post($httpUrl + '/userLightNum/setUserLightNum', {
        deviceFid: pid.value,
        lightOnNum: lightNum2,
        lightOffNum: lightNum1
      }, function (res) {
        if (res.code === 200) {
          layer.msg(i18n.language === 'zh-cn' ? '设置成功！' : 'Successfully set');
          layer.close(mainIndex);
          lightOffNum = lightNum1;
          lightOnNum = lightNum2;
        } else {
          layer.msg(i18n.language === 'zh-cn' ? '设置失败！' : 'Setting failed');
        }
      })
    }
  })
};
let loading = null;
let timer = null;
const updateNet = () => {
  layer.confirm(i18n.language === 'zh-cn' ? '确定更新设备拓扑吗？' : 'Are you sure to update the device topology?', function (index) {
    layer.close(index); //关闭当前弹窗
    loading = showLoad("正在更新中...");
    $.get($httpUrl + "/operation/getDeviceInfoNode", { deviceId: pid.value }, function (res) {
      let num = res.data;
      if (res.code === 200) {
        let reqNum = 1;
        $.get($httpUrl + "/operation/getNetworkTopology", {
          deviceId: pid.value,
          nodeCount: res.data
        }, function (res) {
          timer = setInterval(function () {
            $axios.post("/operation/getNumber4topologies", {
              "deviceFid": pid.value,
            }).then(res => {
              if (res.data.data != null) {
                // console.log(res.data);
                if (res.data.data.length == num) {
                  layer.msg("设备获取网络拓扑成功！");
                  window.clearInterval(timer);
                } else {
                  layer.msg("设备获取网络拓扑响应失败！");
                }
              }
            }).catch(err => { })
          }, 500)
        })

      } else {
        searchHtml.value = '网关搜灯';
        searchFlag.value = false;
        layer.msg(res.msg);
      }
    });
  });
}
const handleSelectionChange_3 = (val) => {
  multipleSelection_3.value = val
}
const handleRowClick_3 = (row, column, event) => {
  if (area.value == 100) {
    multipleTableRef_3.value.toggleRowSelection(row);
  }
}
const selected_3 = (row, index) => {
  return true;
}

let numberLog = ref(0);
const getNumber4topologies = () => {
  $axios.post("/operationDevice/scan", {
    "deviceFid": pid.value,
  }).then(res => {
    if (res.data.data != null) {
      for (let i = 0; i < res.data.data.length; i++) {
        if (checkItem(res.data.data[i])) {
          data.tableData2.push(res.data.data[i]);
        }
      }
    }
  }).catch(err => { })
}

let timeCont = 0;
let at = 0;
let contNumber = ref(0);
let contNumberFlag = ref(false);
let timer9 = null;
let request = null;
const updateNet2 = () => {
  timeCont = 0;
  contNumber.value = 0;
  numberLog.value = 0;
  contNumberFlag.value = false;
  form.render();
  if (request) {
    return false;
  }
  request = $.get($httpUrl + "/operation/getDeviceInfoNode", { deviceId: pid.value }, function (res) {
    if (res.code == 903) {
      layer.msg(res.msg);
      return false;
    }
    request = null;
    if (res.data == null) {
      contNumber.value = null;
    } else {
      contNumber.value = res.data;
    }
    contNumberFlag.value = true;
    if (contNumber.value != null) {
      ElMessage({
        message: '搜到' + contNumber.value + '盏灯',
        type: 'success',
        offset: 100
      })
    }
    if (res.code === 200) {
      timer9 = setInterval(function () {
        $axios.post("/operation/getNumber4topologies", {
          "deviceFid": pid.value,
        }).then(res => {
          if ((timeCont + (60 * 1000 * 2) < new Date().getTime() && timeCont != 0) || (!window.location.href.includes('toSetDeviceManager')) || searchFlag.value == false) {
            window.clearInterval(timer9);
            $axios.post("/operation/stopGetNumber4topologies", {
              "deviceFid": pid.value,
            }).then(res => {
              searchHtml.value = '网关搜灯';
              iconFlag.value = false;
              searchFlag.value = false;
            }).catch(err => { })
          }
          if (res.data.data != null) {
            numberLog.value = res.data.data * 1;
          }
        }).catch(err => { })
      }, 2000)

      let reqNum = 1;
      timer = setInterval(function () {
        res.data = JSON.parse(res.data)
        at = res.data;
        clearInterval(timer);
        reqNum = 1;
        $axios.post('/operation/getplcDevInfo', { "deviceFid": pid.value, "at": at }).then(res => {
          if (res.data.code) {
            timeCont = new Date().getTime()
            getNumber4topologies();
            timer = setInterval(function () {
              if (dialogVisible2.value == false || (!window.location.href.includes('toSetDeviceManager')) || searchFlag.value == false) {
                window.clearInterval(timer);
              }
              getNumber4topologies();
            }, 2000);
          } else { }
        }).catch(err => { })
      }, 2000)
    } else {
      searchHtml.value = '网关搜灯';
      searchFlag.value = false;
      iconFlag.value = false;
      layer.msg(res.msg);
    }
  });
}

let dialogVisible2 = ref(false);
let timer2 = null;
const newAdd = () => {
  data.tableData2 = [];
  let params = {
    "deviceFid": pid.value,
    "mesh":
    {
      "code": 400,
      "deviceName": pid.value,
      "area": "00 00",
      "address": "00 00",
      "action": 'scan',
      "params": '',
      "identity": ""
    }
  }

  data.loading2 = true;
  dialogVisible2.value = true;
  updateNet2();
}
const checkItem = (order) => {
  let arr = data.tableData2.filter((item) => {
    return item.id == order.id
  })
  if (arr.length > 0) {
    return false;
  } else {
    return true;
  }
}
let gateway = ref('');
const operateScan = () => {

  let params = {
    "deviceFid": pid.value,
    "mesh":
    {
      "code": 400,
      "deviceName": pid.value,
      "area": "00 00",
      "address": "00 00",
      "action": 'scan',
      "params": '',
      "identity": ""
    }
  }

  data.loading2 = true;
  window.clearInterval(timer2)
  timer2 = window.setInterval(function () {
    if (dialogVisible2.value == false || (!window.location.href.includes('toSetDeviceManager')) || searchFlag.value == false) {
      window.clearInterval(timer2)
    }
    $axios.post('/operationDevice/scan', {
      deviceFid: pid.value
    }).then(res => {
      // data.loading2=false;
      if (res.data.data != null) {
        for (let i = 0; i < res.data.data.length; i++) {
          res.data.data[i].groupName = hex2int(res.data.data[i].groupName.slice(1).replace(/\s*/g, ""));
          res.data.data[i].areaCode = hex2int(res.data.data[i].areaCode.replace(/\s*/g, ""));
          if (checkItem(res.data.data[i])) {
            data.tableData2.push(res.data.data[i]);
          }
        }
      }

    })
  }, 1000)
}

let district = ref('');
const outLinght = () => {

  if (searchFlag.value) {
    searchHtml.value = "搜灯中";
    iconFlag.value = true;
  }
}
let num = ref();
let identity = ref();
const mouLight = () => {

  if (searchFlag.value) {
    searchHtml.value = "停止搜灯";
    iconFlag.value = false;
  } else {
    searchHtml.value = "网关搜灯";
  }
}
let group = ref();
const searchLight = () => {
  searchFlag.value = !searchFlag.value;

  if (searchFlag.value == true) {
    ElMessage({
      message: '搜灯中，大约等待30秒！',
      type: 'success',
      offset: 100
    })
    searchHtml.value = "搜灯中";
    iconFlag.value = true;
  }
  if (searchFlag.value) {
    updateNet2();
  }
  return false;
}

const operateStop = () => {
  let params = {
    "deviceFid": pid.value,
    "mesh":
    {
      "code": 400,
      "deviceName": pid.value,
      "area": "00 00",
      "address": "00 00",
      "action": 'stopScan',
      "params": '',
      "identity": ""
    }
  }
  $axios.post('/operation/mesh', params).then(res => {
    data.loading = false;
    window.clearInterval(timer2);
    if (res.data.code === 200) {
    } else {
    }
  }).catch(err => { })
  data.loading2 = false;
  window.clearInterval(timer2);
}

const enterAdd = () => {
  window.clearInterval(timer2);
  let arr = JSON.parse(JSON.stringify(multipleSelection2.value))
  for (let i = 0; i < arr.length; i++) {
    arr[i].action = 1;
  }
  let params = {
    "deviceFid": pid.value,
    "operationDevices": arr
  }
  $axios.post('/operationDevice/updateBatch', params).then(res => {
    if (res.data.code == 200) {
      layer.msg("新增成功！");
      dialogVisible2.value = false;
      getList({ deviceFid: pid.value })

    }
  })
}

const close = () => {
  dialogVisible2.value = false;
  contNumber.value = 0;
  numberLog.value = 0;
  window.clearInterval(timer2);
}

const setCustomName = () => {
  let params = {};
  if (customName.value == '全部') {
    params = { deviceFid: pid.value }
  } else {
    params = { groupName: customName.value }
  }
  getList(params, 1)
}

const allLightOn = () => {
  form.render();
  layer.confirm(i18n.language === 'zh-cn' ? '确定设备全部开灯？' : 'Are you sure all devices are on?', function (index) {
    loading = showLoad('全设备开灯请求中...');
    $.post($httpUrl + "/operation/multiOperation", {
      deviceId: pid.value,
      num: lightOnNum,
      operationalType: 0,
      macAddress: 'FFFFFFFFFFFF'
    }, function (res) {
      if (res.data != 'fail') {
        layer.msg("全设备开灯请求成功!");
        let reqNum = 1;
      } else {
        layer.msg("全设备开灯失败!");
      }
    })
  });
}

const allLightOff = () => {
  form.render();
  layer.confirm(i18n.language === 'zh-cn' ? '确定设备全部关灯？' : 'Are you sure all devices are turned off?', function (index) {
    loading = showLoad('全设备关灯请求中...');
    $.post($httpUrl + "/operation/multiOperation", {
      deviceId: pid.value,
      num: lightOffNum,
      operationalType: 2,
      macAddress: 'FFFFFFFFFFFF'
    }, function (res) {
      if (res.data != 'fail') {
        layer.msg("全设备关灯请求成功!");
        let reqNum = 1;
      } else {
        layer.msg("全设备关灯失败!");
      }
    })
  });
}

const allLightAdjust = () => {
  form.render();
  var _sensitivity = 0;
  slider.render({
    elem: '#slideTest1'  //绑定元素
    , input: true //输入框
    , min: 0
    , change: function (value) {
      _sensitivity = value;
    }
  });

  mainIndex = layer.open({
    type: 1,
    title: i18n.language === 'zh-cn' ? '调整全设备亮度' : 'Adjusting the brightness of the entire device:',
    content: $("#slideDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      loading = showLoad('全设备调整亮度请求中...');
      $.post($httpUrl + "/operation/multiOperation", {
        deviceId: pid.value,
        num: _sensitivity,
        operationalType: 1,
        macAddress: 'FFFFFFFFFFFF'

      }, function (res) {
        if (res.data != 'fail') {
          layer.msg("全设备调整亮度请求成功！");
          let reqNum = 1;
        } else {
          layer.msg("全设备调整亮度失败!");
        }
      })
    },
    success: function (index) {

    }
  });
}
const hex2int = (hex) => {
  if (hex == null || hex == '') {
    return;
  }

  var len = hex.length, a = new Array(len), code;
  for (var i = 0; i < len; i++) {
    code = hex.charCodeAt(i);
    if (48 <= code && code < 58) {
      code -= 48;
    } else {
      code = (code & 0xdf) - 65 + 10;
    }
    a[i] = code;
  }

  return a.reduce(function (acc, c) {
    acc = 16 * acc + c;
    return acc;
  }, 0);
}

const allAdjustColor = () => {
  form.render();
  var _sensitivity = 0;
  slider.render({
    elem: '#slideTest1'  //绑定元素
    , input: true //输入框
    , min: 0
    , change: function (value) {
      _sensitivity = value;
    }
  });
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === 'zh-cn' ? '调整设备色温' : "Adjusting device color temperature",
    content: $("#slideDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      operationalType(5, _sensitivity, true)
    }
  })
}

const allTrigger = () => {
  form.render(); //更新全部
  mainIndex = layer.open({
    type: 1,
    title: '全触发器开关',
    content: $("#lightTestDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      const lTestState = $('input[name="lTest"]:checked').val();
      loading = showLoad('全触发器开关请求中...');
      $.post($httpUrl + "/operation/triggerOperation", {
        deviceFid: pid.value,
        type: 2,
        macAddress: '',
        operationState: lTestState
      }, function (res) {
        if (res.data == 'success') {
          layer.msg("全触发器开关请求成功!");
        } else {
          if (res.code == 903) {
            layer.msg(res.msg);
            return false;
          } else {
            layer.msg("全触发器开关失败!");
          }
        }
      })
    },
    success: function (index) {
    }
  });
}

const allDarkenDelay = () => {
  form.render();
  lightNum = 0;
  slider.render({
    elem: '#slideTest1'  //绑定元素
    , input: true //输入框
    , min: 0
    , change: function (value) {
      lightNum = value;
    }
  });
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === 'zh-cn' ? '全部关灯延时' : "All lights off delay",
    content: $("#slideDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      loading = showLoad('全部关灯延时请求中...');
      $.post($httpUrl + "/operation/allDarkenDelay", {
        deviceFid: pid.value,
        operationalType: 5,
        num: lightNum
      }, function (res) {
        if (res.data != 'fail') {
          layer.msg("全部关灯延时请求成功！");
        } else {
          layer.msg("全部关灯延时调整失败!");
        }
      })
    },
    success: function (index) {
    }
  });
}
const allSensitivity = () => {
  form.render();
  _sensitivity = 0;
  slider.render({
    elem: '#slideTest1'  //绑定元素
    , input: true //输入框
    , min: 0
    , max: 11
    , change: function (value) {
      _sensitivity = value;
    }
  });
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === 'zh-cn' ? '调整全触发器灵敏度' : "Adjusting the sensitivity of the full trigger",
    content: $("#slideDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      let sendMsg = 'FFFFFFFFFFFF';
      let len = 1;
      let msg = '';
      if (11 < _sensitivity || _sensitivity < 0) {
        return layer.msg("只接受0~11档位");
      }
      msg = _sensitivity.toString(16).toUpperCase().padStart(2, '0') + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg
      //console.log(msg)
      sensitivity(0, msg)
    }
  })
}
const allPropertie = () => {
  form.render();
  layer.confirm('确定批量获取设备属性？', function (index) {
    loading = showLoad('批量获取设备属性请求中...');

    let maxDelay = 1000;
    let count_down = Math.round(total * maxDelay / 1000);


    const load = layer.msg(`正在批量获取列表，请等待后台全部获取后重新查看设备列表！预计等待${count_down}秒`, {
      anim: 5,
      time: 0,
      success: function (layero, index) {
        var msg = layero.text();
        var i = count_down;
        var timer = null;
        var fn = function () {
          layero.find(".layui-layer-content").text(`正在批量获取列表，请等待后台全部获取后重新查看设备列表！预计等待${i}秒`);
          if (!i) {
            layer.close(index);
            clearInterval(timer);
          }
          i--;
        };
        timer = setInterval(fn, 1000);
        fn();
      },
    })

    $.get($httpUrl + "/operation/batchGetDevicePropertie", {
      deviceFid: pid.value,
      type: 1,
      delayed: Math.round(maxDelay / 3),
      macAddress: 'FFFFFFFFFFFF',
    }, function (res) {
      if (res.code === 200) {
        clearInterval(timer)
        layer.msg("获取设备属性完成");
        getList();
      } else {
        layer.msg("批量获取设备属性失败！");
      }
    })
  });
}
const sensitivity = (operationalType, msg) => {
  let typeList = ["全触发器灵敏度", "设置灵敏度"]
  loading = showLoad(`${typeList[operationalType]}请求中...`)
  $.post($httpUrl + "/operation/sensitivity", {
    fid: pid.value,
    msg: msg
  },
    function (res) {
      if (res.data != 'fail') {
        layer.msg(`${typeList[operationalType]}请求发送成功`);

      } else {
        layer.msg(`${typeList[operationalType]}请求发送失败`);
      }
    })
}
const allLightTest = () => {
  form.render();
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === 'zh-cn' ? '全灯测试' : "Full light test",
    content: $("#lightTestDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      const lTestState = $('input[name="lTest"]:checked').val();
      loading = showLoad('全灯测试请求中...');
      $.post($httpUrl + "/operation/debugDeviceOperation", {
        deviceFid: pid.value,
        type: 2,
        macAddress: '',
        operationState: lTestState,
        macAddress: 'FFFFFFFFFFFF',
      }, function (res) {
        if (res.data != 'fail') {
          layer.msg("全灯测试请求成功！");
          let reqNum = 1;
        } else {
          layer.msg("全灯测试失败!");
        }
      })
    },
    success: function (index) {
    }
  });
}
const closeDialog = () => {
  window.clearInterval(timer)
  window.clearInterval(timer2);
  iconFlag.value = false;
  dialogVisible2.value = false;
  data.loading2 = false;
  searchFlag.value = false;
  searchHtml.value = "网关搜灯";
  contNumber.value = 0;
  numberLog.value = 0;
  $axios.post("/operation/stopGetNumber4topologies", {
    "deviceFid": pid.value,
  }).then(res => {

  }).catch(err => { })
}

const showTig = (str) => {
  //01暂关，11永关，00暂开，10永开  FF暂无
  if (str == "01") {
    return "暂关"
  } else if (str == "11") {
    return "永关"
  } else if (str == "00") {
    return "暂开"
  } else if (str == "10") {
    return "永开"
  } else if (str == "FF") {
    return "暂无"
  }
}
const updateCustomName = () => {

  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg(i18n.language === 'zh-cn' ? "还未选择设备！" : 'No device has been selected yet!');
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: '当前设备',
    content: $("#lightNameDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const customName = $("#customName").val();
      $.post($httpUrl + "/operation/updateOperationDeviceCustomName", {
        id: ls.join(","),
        customName: customName,

      }, function (res) {
        if (res.code === 200) {
          layer.close(mainIndex);
          layer.msg("设置成功！");
          getList({ deviceFid: pid.value });
        } else {
          layer.msg(res.msg);
        }
        $("#customName").val("");
      })
    }
  })
}

const groupNum = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: '当前设备',
    content: $("#lightNameDiv2"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const groupNum = $("#groupNum").val();
      let sendMsg = '';
      let len = 0;
      let msg = ''
      for (let i in multipleSelection.value) {
        sendMsg += multipleSelection.value[i].macaddress
        len += 1
      }
      if (groupNum) {
        if (!(/^[0-9a-fA-F]{1,2}$/.test(groupNum))) {
          return layer.msg("组号不合法,应为2位16进制");
        }
        msg = groupNum.toUpperCase().padStart(2, '0') + "02" + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg
      }
      let load = layer.msg('正在设置中...', {
        icon: 16,
        shade: [0.5, '#f5f5f5'],
        time: 0,
        scrollbar: false,
        offset: 'auto',
      });
      $.post($httpUrl + "/operation/setGroup", {
        msg: msg,
        fid: pid.value
      }, function (res) {
        if (res.data == 'fail' || res.data == null || !res.data) {
          layer.msg('设置失败');
        } else {
          layer.close(mainIndex);
          layer.msg("设置成功！");
          let customNamss = customName.value;
          let p = { deviceFid: pid.value, groupName: customNamss };
          if (customName.value == '全部') {
            customNamss = '';
            p = { deviceFid: pid.value };
          } else {
            customNamss = customName.value;
          }
          getList(p);
        }
        $("#groupNum").val("");
      })
    }
  })
}
let options = ref([]);
let customName = ref('全部');

const getDeviceAliasAllList = () => {
  if (!pid.value) {
    return false;
  }
  $.post($httpUrl + "/operationDevice/deviceGroupAllList", {
    deviceFid: pid.value
  }, function (res) {
    options.value = res.data.filter((item) => {
      return item.group_name
    });
    options.value.push({
      group_name: "全部",
    })
  })
}

const setArea = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }

  mainIndex = layer.open({
    type: 1,
    title: '当前设备',
    content: $("#lightNameDiv4"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const areaCode = $("#areaCode").val();
      let load = layer.msg('正在设置中...', {
        icon: 16,
        shade: [0.5, '#f5f5f5'],
        time: 0,
        scrollbar: false,
        offset: 'auto',
      });
      let arr = JSON.parse(JSON.stringify(multipleSelection.value));
      for (let i = 0; i < arr.length; i++) {
        arr[i].areaCode = areaCode;
      }
      let params = {
        "deviceFid": pid.value,
        "operationDevices":
          arr
      }
      $axios.post('/operationDevice/updateBatch',
        params).then(res => {
          if (res.data.code === 200) {
            layer.msg("设置成功！");
            layer.close(mainIndex);
            getList({ deviceFid: pid.value })
          } else {
            layer.msg("设置失败!");
            layer.close(mainIndex);
          }
        })
    }
  })
}

const updateCustomName2 = () => {
  $("#customName").val('');
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: '当前设备',
    content: $("#lightNameDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const customName1 = $("#customName").val();


      let arr = JSON.parse(JSON.stringify(multipleSelection.value));
      for (let i = 0; i < arr.length; i++) {
        arr[i].customName = customName1;
      }
      let params = {
        "deviceFid": pid.value,
        "operationDevices":
          arr
      }


      layer.msg(`正在设置中....`);
      $axios.post('/operationDevice/updateBatch',
        params).then(res => {
          if (res.data.code === 200) {
            layer.msg("设置成功！");
            layer.close(mainIndex);
            let params = {};
            if (customName.value == '全部') {
              params = { deviceFid: pid.value };
            } else {
              params = { deviceFid: pid.value, groupName: customName.value }
            }
            getList(params)
            getDeviceAliasAllList();
          } else {
            layer.msg("设置失败!");
            layer.close(mainIndex);
          }
        })
    }
  })
}

const start = (item) => {
  let params = {
    deviceId: pid.value,
    macAddress: item.macaddress,
    num: 50, //50是测试的默认亮度
    operationalType: 3,
    gropuNum: "00"
  };
  $.post($httpUrl + "/operation/multiOperation", params,
    function (res) {
      /// layer.close(loading);
      if (res.code === 200 && res.data === "success") {
        layer.msg(`闪一闪请求发送成功`, { time: 500 });
        window.setTimeout(function () {
          stop(params)
        }, 10000)
      } else {
        layer.msg(`闪一闪请求发送失败`, { time: 500 });
      }

    })

}

const stop = (params) => {
  params.operationalType = 4;
  params.num = 50;
  $.post($httpUrl + "/operation/multiOperation", params,
    function (res) {
    })
}

const gradually = () => {
  form.render();
  let _sensitivity = 0;
  slider.render({
    elem: '#slide3'  //绑定元素
    , input: true //输入框
    , min: 0
    , max: 9
    , change: function (value) {
      _sensitivity = value;
      $("#slide3 .layui-input").val('0' + value);
      let str = '0' + value + ' 是 ' + (value * 10) + 'ms递变' + value + '%';
      if (value == 0) {
        str = '00关闭缓光';
      }
      $(".slitips").html(str)
    }
  });
  $("#slide3 .layui-input").val('00');

  let _sensitivity2 = 0;
  slider.render({
    elem: '#slide4'  //绑定元素
    , input: true //输入框
    , min: 0
    , max: 9
    , change: function (value) {
      _sensitivity2 = value;
    }
  });


  mainIndex = layer.open({
    type: 1,
    title: '全渐亮灭',
    content: $("#slideDiv3"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      let sendMsg = 'FFFFFFFFFFFF';
      let len = 1;
      let msg = '';
      if (11 < _sensitivity || _sensitivity < 0) {
        return layer.msg("只接受0~11档位");
      }
      msg = _sensitivity.toString(16).toUpperCase().padStart(2, '0') + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg

      let macs = multipleSelection.value.map((item) => {
        return item.macaddress
      }).toString()

      let typeList = ["开灯", "调灯", "关灯", "单灯测试开", "单灯测试关", "调整色温"]
      loading = showLoad(`全渐亮灭请求中...`)

      let macAddress = multipleSelection.value.length == 0 ? "FFFFFFFFFFFF" : macs;
      let objs = {
        deviceFid: pid.value,
        "at": "AT+SET_SLOW_LIGHT=" + macAddress + "," + "FF" + "," + ('0' + _sensitivity)
      };
      $axios.post('/operation/at', objs).then(res => {
        data.loading = false;
        if (res.data.code === 200) {
          layer.msg(res.data.data);
        } else {
          showLoad(`全渐亮灭发送失败`, 1000)
        }
      }).catch(err => { })
    }
  })
}
const formdataify = (params) => {
  const formData = new FormData();
  Object.keys(params).forEach(key => {
    if (typeof params[key] == "string") {
      formData.append(key, params[key]);
    } else {
      formData.append(key, JSON.stringify(params[key]));
    }
  });
  return formData;
};

const ungroup = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  const groupNum = '00';
  let sendMsg = '';
  let len = 0;
  let msg = ''
  for (let i in multipleSelection.value) {
    sendMsg += multipleSelection.value[i].macaddress
    len += 1

  }
  if (groupNum) {
    if (!(/^[0-9a-fA-F]{1,2}$/.test(groupNum))) {
      return layer.msg("组号不合法,应为2位16进制");
    }
    msg = groupNum.toUpperCase().padStart(2, '0') + "00" + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg
  }
  let load = layer.msg('正在解除中...', {
    icon: 16,
    shade: [0.5, '#f5f5f5'],
    time: 0,
    scrollbar: false,
    offset: 'auto',
  });
  $.post($httpUrl + "/operation/setGroup", {
    msg: msg,
    fid: pid.value
  }, function (res) {
    if (res.data == 'fail' || res.data == null || !res.data) {
      layer.msg('设置失败');
      layer.close(mainIndex);
    } else {
      layer.close(mainIndex);
      layer.msg("设置成功！");
      for (let i in rowsData) {
        if (rowsData[i].checked) {
          rowsData[i].update({
            groupName: groupNum.toUpperCase().padStart(2, '0')
          })
        }
      }
    }

    $("#groupNum").val("");
  })

}
const lightOn = () => {
  form.render();
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  operationalType(0, lightOnNum)
}
const lightOff = () => {
  form.render();
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  operationalType(2, lightOffNum)
}


const adjustLight = () => {
  form.render();
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  var _sensitivity = 0;
  slider.render({
    elem: '#slideTest1'  //绑定元素
    , input: true //输入框
    , min: 0
    , change: function (value) {
      _sensitivity = value;
    }
  });
  mainIndex = layer.open({
    type: 1,
    title: '调整设备亮度',
    content: $("#slideDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      operationalType(1, _sensitivity)
    }
  })
}
const adjustColor = () => {
  form.render();
  var _sensitivity = 0;
  slider.render({
    elem: '#slideTest1'  //绑定元素
    , input: true //输入框
    , min: 0
    , change: function (value) {
      _sensitivity = value;
    }
  });
  mainIndex = layer.open({
    type: 1,
    title: '调整设备色温',
    content: $("#slideDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      operationalType(5, _sensitivity)
    }
  })
}

const setsensitivity = () => {
  form.render();
  var _sensitivity = 0;
  let sendMsg1 = '';
  let len = 0;
  let msg = ''
  for (let i in multipleSelection.value) {
    sendMsg1 += multipleSelection.value[i].macaddress
    len += 1

  }
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  slider.render({
    elem: '#slideTest1'  //绑定元素
    , input: true //输入框
    , min: 0
    , max: 11
    , change: function (value) {
      _sensitivity = value;
    }
  });
  mainIndex = layer.open({
    type: 1,
    title: '调整全触发器灵敏度',
    content: $("#slideDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);

      if (11 < _sensitivity || _sensitivity < 0) {
        return layer.msg("只接受0~11档位");
      }
      msg = _sensitivity.toString(16).toUpperCase().padStart(2, '0') + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg1
      sensitivity(1, msg)
    }
  })
}
const flash = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  operationalType(3);
}

const stopFlash = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  operationalType(4);
}

const lightTest = () => {
  form.render();
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  form.render();
  mainIndex = layer.open({
    type: 1,
    title: '单灯测试',
    content: $("#lightTestDiv"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      layer.close(mainIndex);
      let lTestState = $('input[name="lTest"]:checked').val()
      if (lTestState === "0") {
        operationalType(3)
      } else {
        operationalType(4)
      }

    }
  })
}
const operationalType = (operationalType, num, allFlag) => {
  let macs = multipleSelection.value.map((item) => {
    return item.macaddress
  }).toString()

  let typeList = ["开灯", "调灯", "关灯", "闪一闪", "停止闪", "调整色温"]
  loading = showLoad(`${typeList[operationalType]}请求中...`)

  $.post($httpUrl + "/operation/multiOperation", {
    deviceId: pid.value,
    macAddress: allFlag ? "FFFFFFFFFFFF" : macs,
    num: num === 0 || num ? num : 50, //50是测试的默认亮度
    operationalType: operationalType,
    gropuNum: "00"
  },
    function (res) {
      layer.close(loading);
      if (res.code === 200 && res.data === "success") {
        layer.msg(`${typeList[operationalType]}请求发送成功`, { time: 500 });
      } else {
        layer.msg(`${typeList[operationalType]}请求发送失败`, { time: 500 });
      }
    })
}
const showType = (type) => {
  if (type == -1) return "系统";
  if (type == 0) return "云平台";
  if (type == 1) return "云产品";
  if (type == 2) return "云设备";
}
let dialogVisible = ref(false)
let textareaV = ref('');
const atOperation = () => {
  dialogVisible.value = true;
}
//OTA升级
let upload = ref();
let otaVisible = ref(false);

const unbind = () => {
  let ls = multipleSelection.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  let arr = JSON.parse(JSON.stringify(multipleSelection.value));
  for (let i = 0; i < arr.length; i++) {
    arr[i].action = 0;
  }
  let params = {
    "deviceFid": pid.value,
    "operationDevices":
      arr
  }

  ElMessageBox.confirm('确定要删除吗?', '提示').then(() => {
    $axios.post('/operationDevice/deleteBatch',
      params).then(res => {
        if (res.data.code === 200) {
          layer.msg("删除成功！");
          layer.close(mainIndex);
          getList({ deviceFid: pid.value })
        } else {
          layer.msg("删除失败!");
          layer.close(mainIndex);
        }
      })
  })
}

const OTAUpgrade = () => {
  otaVisible.value = true;
}

const enterSen = async () => {
  showChatList.value = []
  if (textareaV.value == '') { return false; }
  senloading.value = true;
  let params2 = { "deviceFid": pid.value, "at": textareaV.value }
  const response = await clackAtApi(params2)
  senloading.value = false;
  const t = globalProperties.$dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
  if (response.code === 200) {
    chatList.value.push({ fcont: textareaV.value, hcont: response.data, time: t })
    ElMessage.success(`系统提示：【${response.message}！】`);
  } else {
    chatList.value.push({ fcont: textareaV.value, hcont: response.message, time: t })
    ElMessage.error(`系统提示：【${response.message}！】`);
  }
  chatList.value.forEach(element => {
    showChatList.value.push(element)
  });
  showChatList.value.reverse();
  textareaV.value = '';
}

let dialogTableVisible = ref(false);
let gridData = ref([]);
const setAlert = () => {
  dialogTableVisible.value = true;
  getArr();
}

const getArr = () => {
  $.get($httpUrl + "/operationDevice/getBlinkDev?fid=" + pid.value, {
  }, function (res) {
    gridData.value = res.data;
  })
}

let senloading = ref(false);
const showLoad = (msg) => {
  return layer.msg(msg, {
    icon: 16,
    shade: [0.5, '#f5f5f5'],
    scrollbar: false,
    offset: 'auto',
    time: false //取消自动关闭
  });
}
const multipleTableRef = ref()
const multipleSelection = ref([])
const multipleSelection2 = ref([])
const multipleSelection3 = ref([])

const handleSelectionChange2 = (val) => {
  multipleSelection2.value = val
}
const handleSelectionChange3 = (val) => {
  multipleSelection3.value = val
}
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

//全局列表
var tableIns;
//后台设定开灯值
var lightOnNum = 40;
//后台设定关灯值
var lightOffNum = 0;
//全局弹出
var mainIndex;
let total = 0;
var $ = '';
var layer = '';
var form = '';
var table = '';
var dropdown = '';
var sdTable = '';
var slider = '';
var slider1 = '';
var slider2 = '';
let _sensitivity = 0;
var secIndex = '';
var lightNum = 0;

const getWidth = () => {
  return (window.innerWidth - 398) + 'px';
}
const getHeight = () => {
  return (window.innerHeight - 278) + 'px';
}
let multipleSelection_3 = ref([]);
const setArea3 = () => {
  let ls = multipleSelection_3.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: '当前设备',
    content: $("#lightNameDiv4_3"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const areaCode = $("#areaCode_3").val();
      let load = layer.msg('正在设置中...', {
        icon: 16,
        shade: [0.5, '#f5f5f5'],
        time: 0,
        scrollbar: false,
        offset: 'auto',
      });
      let arr = JSON.parse(JSON.stringify(multipleSelection_3.value));
      for (let i = 0; i < arr.length; i++) {
        arr[i].areaCode = areaCode;
      }
      let params = {
        "deviceFid": pid.value,
        "operationDevices":
          arr
      }
      $axios.post('/operationDevice/updateBatch',
        params).then(res => {
          getArr();
          if (res.data.code === 200) {
            layer.msg("设置成功！");
            layer.close(mainIndex);
          } else {
            layer.msg("设置失败!");
            layer.close(mainIndex);
          }
        })
    }
  })
}
const groupNum3 = () => {
  let ls = multipleSelection_3.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  mainIndex = layer.open({
    type: 1,
    title: '当前设备',
    content: $("#lightNameDiv2_3"),
    area: ['40%', '35%'],
    btnAlign: 'c',
    btn: ['<div class="layui-icon layui-icon-release">确定</div>', '<div class="layui-icon layui-icon-close">取消</div>'],
    yes: function (index, layero) {
      const groupNum = $("#groupNum_3").val();
      let sendMsg = '';
      let len = 0;
      let msg = ''
      for (let i in multipleSelection_3.value) {
        sendMsg += multipleSelection_3.value[i].macaddress
        len += 1

      }
      if (groupNum) {
        if (!(/^[0-9a-fA-F]{1,2}$/.test(groupNum))) {
          return layer.msg("组号不合法,应为2位16进制");
        }
        msg = groupNum.toUpperCase().padStart(2, '0') + "02" + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg
      }
      let load = layer.msg('正在设置中...', {
        icon: 16,
        shade: [0.5, '#f5f5f5'],
        time: 0,
        scrollbar: false,
        offset: 'auto',
      });
      $.post($httpUrl + "/operation/setGroup", {
        msg: msg,
        fid: pid.value
      }, function (res) {
        getArr();
        if (res.data == 'fail' || res.data == null || !res.data) {
          layer.msg('设置失败');
        } else {
          layer.close(mainIndex);
          layer.msg("设置成功！");
        }

        $("#groupNum_3").val("");
      })
    }
  })
}
const ungroup3 = () => {
  let ls = multipleSelection_3.value.map((item) => {
    return item.id
  })
  if (ls.length == 0) {
    layer.msg("还未选择设备！");
    return;
  }
  const groupNum = '00';
  let sendMsg = '';
  let len = 0;
  let msg = ''
  for (let i in multipleSelection_3.value) {
    // ls.push(rowsData[i].data.id)
    sendMsg += multipleSelection_3.value[i].macaddress
    len += 1

  }
  if (groupNum) {
    if (!(/^[0-9a-fA-F]{1,2}$/.test(groupNum))) {
      return layer.msg("组号不合法,应为2位16进制");
    }
    msg = groupNum.toUpperCase().padStart(2, '0') + "00" + len.toString(16).toUpperCase().padStart(2, "0") + sendMsg
  }
  let load = layer.msg('正在解除中...', {
    icon: 16,
    shade: [0.5, '#f5f5f5'],
    time: 0,
    scrollbar: false,
    offset: 'auto',
  });
  $.post($httpUrl + "/operation/setGroup", {
    msg: msg,
    fid: pid.value
  }, function (res) {
    if (res.data == 'fail' || res.data == null || !res.data) {
      layer.msg('设置失败');
      layer.close(mainIndex);
    } else {
      layer.close(mainIndex);
      layer.msg("设置成功！");
    }
    $("#groupNum_3").val("");
  })

}

onMounted(() => {
  layui.extend({

  }).use(['jquery', 'layer', 'form', 'table', 'slider', 'dropdown'], function () {
    $ = layui.jquery;
    layer = layui.layer;
    form = layui.form;
    table = layui.table;
    dropdown = layui.dropdown;
    sdTable = layui.table;
    slider = layui.slider;
    slider1 = layui.slider;
    slider2 = layui.slider;
    _sensitivity = 0;
    //第二弹出
    secIndex = '';
    //渲染滑块
    lightNum = 0;
    slider.render({
      elem: '#slideTest1'  //绑定元素
      , input: true //输入框
      , min: 0
      , change: function (value) {
        lightNum = value;
      }
    });
    getList({})
    getDeviceAliasAllList()

  })
})
</script>

<style lang="scss" scoped>
.tsdm-box-cls {
  width: auto;
  padding: 0px;
  margin-top: -8px;
  margin-right: -17px;
  position: relative;
  left: 54px;
}

.dialog-footer {
  text-align: center;
  display: block;
}

.available1 {
  color: orangered;
}

.btn-row>div {
  visibility: hidden;
}

.btn-row>div.btnbox {
  visibility: visible;
}

.btnbox {
  line-height: 285%;

  button {
    min-width: 70px;
  }
}

.atbox {
  padding: 10px 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 550px;
  overflow: scroll;
  display: flex;
  flex-direction: column-reverse;
  padding-bottom: 48px;
}

:deep(.selectName .el-input__wrapper) {
  background: none !important;
  box-shadow: none !important;
}

:deep(.selectName ::-webkit-input-placeholder) {
  color: #fff !important;
  text-align: right;
}

:deep(.selectName .el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none !important;
}

:deep(.selectName input) {
  color: #fff !important;
  text-align: right;
}

:deep(.selectName select) {
  min-width: 80px;
  margin-left: 6px;
}

:deep(.selectName ::-webkit-input-placeholder) {
  color: #fff !important;
}

.text-red {
  color: red;
}

.uploadBox {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;

  .upload-demo {
    text-align: center;
  }
}

:deep(.uploadBox .el-progress) {
  display: none !important;
}

.atbox .el-row {
  margin-bottom: 25px;
}

.rowbot {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-bottom: 0px !important;
  border-bottom: 0px !important;
}

.slidebox {
  position: relative;
  top: 10px;
}

.slitips {
  text-align: center;
  line-height: 42px;
}

:deep(.newAdd .el-table__inner-wrapper) {
  border: solid 1px #fff;
}

:deep(.sceneTableData .el-scrollbar__thumb) {
  background: #ccc !important;
}

:deep(.sceneTableData .el-button+.el-button) {
  margin-left: 5px;
}

.newAddTab {
  border-bottom: solid 1px #fff;
  height: 50vh;
}

:deep(.newAddTab .el-table__empty-text) {
  line-height: 43vh;
}

:deep(.el-dialog.is-draggable .el-dialog__header) {
  background: #217093;
}

:deep(.dialogPermiss .el-dialog__title) {
  color: #fff !important;
}

:deep(.dialogPermiss .el-dialog__headerbtn .el-dialog__close) {
  color: #fff !important;
}

.setArea3 {
  padding: 9px 0;
  margin-top: -17px;
}

.btn3 {
  display: block;

  .el-button+.el-button {
    margin-left: 0px;
    margin-top: 5px;
  }
}
</style>

<style lang="scss" scoped>
.Naming {
  display: flex;
  align-items: center;
  height: 100%;
}

.available1 {
  color: orangered;
}

.btn-row>div {
  visibility: hidden;
}

.btn-row>div.btnbox {
  visibility: visible;
}

:deep(.selectName .el-input__wrapper) {
  background: none !important;
  box-shadow: none !important;
}

:deep(.selectName .el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none !important;
}

:deep(.selectName select) {
  min-width: 80px;
  margin-left: 6px;
}

:deep(.selectName ::-webkit-input-placeholder) {
  color: #fff !important;
}

.dialog-footer {
  text-align: center;
  width: 100%;
  display: block;
}

:deep(.newAdd .el-table__inner-wrapper) {
  border: solid 1px #fff;
}

:deep(.sceneTableData .el-scrollbar__thumb) {
  background: #ccc !important;
}

:deep(.sceneTableData .el-button+.el-button) {
  margin-left: 5px;
}
</style>

<style lang="scss" scoped>
.newAdd .el-dialog__header {
  background: #0ec8ec69 !important;
}

.newAdd .el-dialog__header .el-dialog__title {
  color: #fff !important;
}

.el-row {
  padding: 10px 0;
  border-bottom: dotted 1px #ddd;
}

.el-row>div {
  align-items: center;
}

.el-row>div.el-col-4:first-child {
  display: flex;
}

.sliderbox {
  display: flex;
  align-items: center;
}

.sliderbox>span {
  margin-left: 20px;
  font-size: 14px;
  display: block;
  width: 30px;
}

.linev .layui-form-label {
  width: 114px;
}

.linev .layui-input-block {
  position: relative;
  top: 17px;
  margin-left: 150px;
}

:deep(.selectName input) {
  color: #fff !important;
  text-align: right;
}

:deep(.wiretab .el-checkbox__input.is-disabled .el-checkbox__inner) {
  background: #ccc;
  border-color: #ccc;
}

.searchFlag {
  background: #30ce13;
  border-color: #30ce13;
  cursor: pointer;
  vertical-align: 0px;
}

.searchFlag:hover {
  background: #ee2020;
  border-color: #ee2020;
  cursor: pointer;
}

.searchFlagBox {
  display: inline-block;
  cursor: pointer !important;
}

.loa {
  animation: rotating 2s linear infinite;
}

@-webkit-keyframes rotating {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}

@keyframes rotating {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(1turn)
  }
}
</style>
<style>
.newAdd .el-dialog__title {
  color: #fff !important;
}

.el-dialog__body .top .el-row>div {
  display: flex;
}

.top .el-row>div>span {
  display: inline-block;
  width: 100px;
  text-align: right;
  padding-right: 10px;
}

.el-dialog__body .top .el-row>div>span {
  width: auto;
  white-space: nowrap;
  padding: 0 5px;
}

.radiocont .layui-form-radio {
  display: none;
}

.btnbox .top {
  color: #fff;
}

.btnbox .top .el-row {
  padding-right: 38%;
}

.btnbox {
  width: 100%;
}

.tips {}

.tops .el-row>div>span>div {
  margin-left: 5px;
}

.newName {
  display: flex;
  align-items: center;
}

.newName>span {
  display: flex;
  width: 85px;
  text-align: right;
  font-size: 14px;
  padding-right: 10px;
  align-items: center;
  justify-content: right;
}

.newName p {
  padding-left: 30px;
}
</style>
<style>
.layui-layer-wrap .el-radio.el-radio--large .el-radio__label {
  color: #f13131 !important;
}

.top .el-select .el-input__wrapper {
  background: none;
}

.top .el-input__wrapper {
  background: none;
}

::-webkit-input-placeholder {
  color: #ccc !important;
  font-size: 16px;
}

.tops .el-input__inner {
  color: #fff !important;
}

.tops .el-row {
  padding-right: 0% !important;
}

.tops .el-row>div>span {
  width: auto !important;
  margin-top: 10px;
}

.tops .el-row>div {
  display: block;
}

.sceneTableData .cell {
  color: #fff;
}

.sceneTableData td .cell {
  color: #000;
}

.sceneTableData th {
  background: var(--el-color-primary) !important;
}

.sceneVisible {
  width: 100%;
}

.sceneVisible .el-col {
  margin-bottom: 10px;

}

.altcon {
  width: 120px;
  height: 36px;
  background-color: #ecf0f8;
  border-radius: 6px;
  text-align: center;
  line-height: 36px;
  margin-left: 10px;
  font-size: 14px;
  color: #1e62da;
  width: fit-content;
  padding: 0px 6px;
  margin-bottom: 10px;
  display: inline-block;
  cursor: pointer;
}

.operateInfo {
  font-weight: bold;
}

.altconp {
  padding-left: 30px;
}

.top .el-button+.el-button {
  margin-left: 6px;
}

.Actions .el-dialog__header {
  background: none !important;
}

.tipsBox {
  margin-top: 4px;
}

.numberLog {
  color: #d99600;
  display: inline-block;
  padding: 4px;
  border: solid 1px #d99600;
  border-radius: 3px;
  margin-left: 3px;
  position: relative;
  top: 3px;
}
</style>